<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="format-detection" content="telephone=no">
		<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes">
	</head>
	<title>upload</title>

	<body>
		<div class="container">
			<label>请选择一个图像文件：</label>
			<input type="file" id="file_input" multiple/>
			<div id="body"></div>
		</div>
	</body>
	<script>
		window.onload = function() {
			var input = document.getElementById("file_input");
			var result, div;
			if(typeof FileReader === 'undefined') {
				result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
				input.setAttribute('disabled', 'disabled');
			} else {
				input.addEventListener('change', readFile, false);
			}　　　 //handler   
			function readFile() {
				for(var i = 0; i < this.files.length; i++) {
					if(!input['value'].match(/.jpg|.gif|.png|.bmp/i)) {　
						return alert("上传的图片格式不正确，请重新选择")　　　　　
					};
					var reader = new FileReader();
					reader.readAsDataURL(this.files[i]);
					reader.onload = function(e) {
						result = '<div id="result"><img src="' + this.result + '" alt=""/></div>';
						div = document.createElement('div');
						div.innerHTML = result;
						document.getElementById('body').appendChild(div);　　　　　　　　　　
					}
				}
			}
		};
	</script>

</html>